<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的心得</title>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css" />
    <script src="/resources/js/jquery.min.js"></script>
    <style type="text/css">
        .showli{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .am-pagination li a,.am-pagination li span{
            padding: 0.1em 0.1em;
        }
    </style>
</head>
<body>
<div style="background-color:#82a6f5;height:7%;">
    <a href="/c/centre" target="_parent">
        <button style="background-color:rgba(255,255,255,0);border-radius:25px;border-color:white;margin-top:7px;margin-left:12px;">
            <b style="color:white;"><</b>
        </button>
    </a>
</div>
<!-- 中间 -->
<div style="width:100%;height:93%;">
    <div class="am-panel-group" id="accordion">
        <c:forEach items="${pageInfo.list}" var="a" varStatus="i">
            <div class="am-panel am-panel-default">
                <div class="am-panel-hd">
                    <h5 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-${i.index}'}">${a.reserve2} </h5>
                    <h5 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-${i.index}'}">心得：${a.content}</h5>
                    <h5 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-${i.index}'}">学习时间：<fmt:formatDate type="both" dateStyle="medium" timeStyle="medium" value="${a.learnTime}" /></h5>
                </div>
                <div id="do-not-say-${i.index}" class="am-panel-collapse am-collapse">
                    <div class="am-panel-bd">
                        <%--<c:if test="${not empty a.content}">--%>
                            <%--<h4>注意事项：</h4>--%>
                            <%--${ a.content}--%>

                        <%--</c:if>--%>
                        <%--<c:if test="${not empty a.content}">--%>
                            <%--<h4>叮嘱：</h4>--%>
                            <%--${ a.content}--%>
                        <%--</c:if>--%>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>

    <ul data-am-widget="pagination"
        class="am-pagination am-pagination-default" style="bottom:0">


        <c:if test="${!pageInfo.isFirstPage}">
            <li class="am-pagination-first ">
                <a href="/e/experience?pageNum=${pageInfo.navigateFirstPage}" class="">第一页</a>
            </li>
        </c:if>
        <c:if test="${pageInfo.isFirstPage}">
            <li class="am-pagination-first nopage" style="border:0">
                <a class="nopage" style="border:0">&nbsp;&nbsp;</a>
            </li>
        </c:if>
        <c:if test="${pageInfo.hasPreviousPage}">
            <li class="am-pagination-prev ">
                <a href="/e/experience?pageNum=${pageInfo.prePage}" class="">上一页</a>
            </li>
        </c:if>
        <c:if test="${!pageInfo.hasPreviousPage}">
            <li class="am-pagination-prev nopage" style="border:0">
                <a class="nopage" style="border:0">&nbsp;&nbsp;</a>
            </li>
        </c:if>

        <c:if test="${pageInfo.prePage != 0}">
            <li class="">
                <a href="/e/experience?pageNum=${pageInfo.prePage}" class="">${pageInfo.prePage}</a>
            </li>
        </c:if>
        <c:if test="${pageInfo.prePage == 0}">
            <li class="nopage" style="border:0">
                <a class="nopage" style="border:0">&nbsp;&nbsp;</a>
            </li>
        </c:if>

        <li class="am-active">
            <a href="" class="am-active">${pageInfo.pageNum}</a>
        </li>
        <c:if test="${pageInfo.nextPage != 0}">
            <li class="">
                <a href="/e/experience?pageNum=${pageInfo.nextPage}" class="">${pageInfo.nextPage}</a>
            </li>
        </c:if>
        <c:if test="${pageInfo.nextPage == 0}">
            <li class="nopage" style="border:0">
                <a class="nopage" style="border:0">&nbsp;&nbsp;</a>
            </li>
        </c:if>

        <c:if test="${pageInfo.hasNextPage}">
            <li class="am-pagination-next ">
                <a href="/e/experience?pageNum=${pageInfo.nextPage}" class="">下一页</a>
            </li>
        </c:if>
        <c:if test="${!pageInfo.hasNextPage}">
            <li class="am-pagination-next nopage" style=" border: 0">
                <a class="nopage" style="border:0">&nbsp;&nbsp;</a>
            </li>
        </c:if>

        <c:if test="${!pageInfo.isLastPage}">
            <li class="am-pagination-last">
                <a href="/e/experience?pageNum=${pageInfo.navigateLastPage}" class="">最末页</a>
            </li>
        </c:if>
        <c:if test="${pageInfo.isLastPage}">
            <li class="am-pagination-last nopage" style="border:0">
                <a class="nopage" style="border:0">&nbsp;&nbsp;</a>
            </li>
        </c:if>

    </ul>
</div>
</div>


</body>
<script>
    $("li").click(function (){
        $("li").attr("style","");
        $(this).attr("style","white-space:pre-wrap");
    });
</script>
</html>